<template>
  <div>
    <el-row style="margin: 50px;">
      <el-col :span="6">
        <pie-chart :chart-data="pieData" />
      </el-col>
      <el-col :span="18">
        <el-row :gutter="20" style="width: 700px;">
          <el-col :span="12">
            <div>
              <el-statistic
                group-separator=","
                :precision="2"
                decimal-separator="."
                :value="value"
                title="总营业额">

              <el-statistic title="总订单量">
                <template slot="formatter">{{ value }}</template>
              </el-statistic>

                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-statistic title="总订单量">
                <template slot="formatter">{{ value2 }}</template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="divdata" style="background-color: #409EFF;">订单量（份）</div>
    <div class="divdata" style="background-color: #1BD66C;">营业额（元）</div>
    <div ref="chart" style="width: 800px; height: 500px"></div>
    <div v-if="loading" class="loading">数据加载中...</div>
    <div v-if="error" class="error">{{ errorMessage }}</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios' // 需要先安装 axios

export default {
  data() {
    return {
      chart: null,
      chartData: [],
      chartData2: [],
      loading: false,
      error: false,
      errorMessage: '',
      refreshInterval: null,
      value:1111,
      title:'重中之重',
      value2:2222
    }
  },
  mounted() {
    this.initChart()
    this.fetchData()
    // 每30秒自动刷新数据
    this.refreshInterval = setInterval(() => {
      this.fetchData()
    }, 30000)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    clearInterval(this.refreshInterval)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      window.addEventListener('resize', this.handleResize)
    },
    async fetchData() {
      try {
        this.loading = true
        this.error = false

        // 替换为你的真实API地址
        const response = await axios.get('http://localhost:21371/Api/OrderForm/GetMonth')
        const response2 = await axios.get('http://localhost:21371/Api/OrderForm/GetPrice')
        console.log(response);
        // 数据预处理
        this.chartData = response.data
        this.chartData2 = response2.data

        this.valu2 = this.chartData.reduce((acc, cur) => acc + cur.value, 0)
        this.value = this.chartData2.reduce((acc, cur) => acc + cur.value, 0)

        this.updateChart()
      } catch (err) {
        this.error = true
        this.errorMessage = `数据加载失败: ${err.message}`
        console.error('数据获取错误:', err)
      } finally {
        this.loading = false
      }
    },
    updateChart() {
      const option = {
        title: {
          text: '本年销售订单趋势图',
          left: 'center'
        },
        // 保留所有必要的顶层配置
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>{a}: {c}'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.date),
          axisLabel: { rotate: 45 }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 1000,
          axisLabel: { formatter: '{value}' }
        },
        series: [{
          name: '数据量',
          type: 'line',
          smooth: true,
          data: this.chartData.map(item => item.value),
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#409EFF' },
          lineStyle: { width: 3 },
          areaStyle: { /* 保留渐变配置 */ }
        },
        {
          name: '数据量',
          type: 'line',
          smooth: true,
          data: this.chartData2.map(item => item.value),
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#1BD66C' },
          lineStyle: { width: 3 },
          areaStyle: { /* 保留渐变配置 */ }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        }
      }

      // 推荐使用默认合并方式
      this.chart.setOption(option)
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  }
}
</script>

<style>
.loading,
.error {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  color: #ff4444;
}
.divdata{
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin: 10px;
  color: white;
  border-radius: 3px;
  font-size: 14px;
}
</style>